<template>
	<view class="detail-box" v-if="detail.elementsImages && detail.elementsImages.length">
		<view class="top-box">
			<view class="item" v-for="(i,index) in detail.elementsImages" :key="index">
				<image :src="i" mode=""></image>
			</view>
		</view>
		<view class="img-info-box">
			<uni-swiper-dot :info="detail.renderingImages" :current="current" field="content" :mode="mode" :selectedBackgroundColor="'#666666'">
				<swiper class="swiper-box" @change="change">
					<swiper-item v-for="(item ,index) in detail.renderingImages" :key="index">
						<view class="swiper-item">
							<image class="sw-img" :src="item" mode=""></image>
						</view>
					</swiper-item>
				</swiper>
			</uni-swiper-dot>
			<view class="desc">
				{{detail.describ}}
			</view>
		</view>
		<view class="bnt" v-if="bntType == 1" @tap="open">
			确认下单
		</view>
		<view class="f-bnt" v-if="bntType == 2">
			<view class="l cc" v-if="detail.userIsCollect == 1">
				已收藏
			</view>
			<view class="l" @tap="sc" v-if="detail.userIsCollect == 2">
				收藏
			</view>
			<view class="r" @tap="openSet">
				下单
				<!-- 下单逻辑 下单要判断用户有没有点过收藏，不然就要提醒他先收藏 -->
				<!-- 点收藏我给你返回subjectId 下单的时候你判断是否有subjectId -->
			</view>
		</view>
		<uni-popup ref="popup" type="bottom">
			<view class="p-content">
				<view class="txt" @tap="getVal(1)">
					直接打印指甲
				</view>
				<view class="txt" @tap="getVal(2)">
					打印到甲片
				</view>
				<view class="txt c" @tap="close()">
					取消
				</view>
			</view>
		</uni-popup>
		<!--确认下单弹窗(选指甲类型和大小)-->
		<uni-popup ref="popupSize" type="bottom">
			<TypeSize v-if="tsShow" @saveValue="saveValue"/>
		</uni-popup>
		<!--自定义弹窗-->
		<show-modal :show="isShowModal" 
			@close="closeModal" 
			:title="modalTitle" 
			:content="modalContent"
			:cancelText="modalCancelText"
			:confirmText="modalConfirmText"
			@cancel="bindBtn('cancel')" 
			@confirm="bindBtn('confirm')">
		</show-modal>
		<!-- userIsCollect 1 已收藏  2 未收藏 -->
		<!--地址弹窗-->
		<uni-popup ref="popupAddr" background-color="#F3ECEF" @change="changeAddr" :is-mask-click="false">
			<view class="popup-content">
				<view class="addr-list">
					<view class="hed">
						选择收获地址<view class="close" @tap="addrClose"><image src="../../static/x.png" class="xw"></image></view>
					</view>
					<view class="item" v-for="item in addrList" :key="item.id" @tap="addrs(item)">
						<view class="title">
							{{item.tele}}
						</view>
						<view class="desc">
							{{item.province}}{{item.city}}{{item.district}}{{item.address}}
						</view>
						<image v-show="addrIndex == item.id" src="../../static/check-pay.png" class="check" mode=""></image>
					</view>
					<view class="addr-add-box" v-show="!addrShow" @tap="addrShow = true">
						新增地址
					</view>
					<view class="t-bnt" v-show="!addrShow" @tap="addrSave">
						确定
					</view>
				</view>
				<view class="addr-model" v-if="addrShow">
					<view class="hed">
						<text class="rad"></text>无地址信息
					</view>
					<view class="v-list">
						<view class="item">
							<view class="left-name">姓名</view>
							<view class="rcont"><input class="uni-input" v-model="form.userName" placeholder="请输入姓名" /></view>
						</view>
						<view class="item">
							<view class="left-name">所在地区</view>
							<view class="rcont">
								<!-- <input class="uni-input" placeholder="请输入所在地区" /> -->
								<!-- <pickerAddress @change="change">{{txt}}</pickerAddress> -->
								<picker mode="region" :value="addrValue" @change="bindTimeChange">
									<view class="uni-input">{{addr}}</view>
								</picker>
							</view>
						</view>
						<view class="item">
							<view class="left-name">详细地址</view>
							<!-- <view class="rcont"><input class="uni-input" placeholder="请输入详细地址" /></view> -->
						</view>
						<view class="item">
							<view class="rcont" style="text-align: left;"><textarea style="height: 80rpx;" class="uni-input" v-model="form.address" placeholder="请输入详细地址" /></view>
						</view>
						<view class="item">
							<view class="left-name">手机号码</view>
							<view class="rcont"><input class="uni-input" v-model="form.tele" placeholder="请输入手机号码" /></view>
						</view>
						<view class="item">
							<view class="left-name">邮编</view>
							<view class="rcont"><input class="uni-input" v-model="form.zip" placeholder="请输入邮编" /></view>
						</view>
					</view>
					<view class="bntx">
						<view class="c" @tap="addrShow = false">
							取消
						</view>
						<view class="s" @tap="save">
							确定
						</view>
					</view>
				</view>
			</view>
		</uni-popup>
		<!--绑定手机号-->
		<uni-popup ref="popupPhone" background-color="#F3ECEF" @change="changePhone" :is-mask-click="false">
			<bindPhone @confirmEvent="call"/>
		</uni-popup>
	</view>
</template>

<script>
	import {getQuerySubjectInfo,userCollectSubject,addUserAddr,getUserAddr,verfiyCode} from "@/api/user.js"
	import {getQueryGoodsInfo} from "@/api/buyer.js"
	import TypeSize from '@/components/typeSize'
	import ShowModal from "@/components/showModal.vue"
	import bindPhone from '@/components/bindPhone.vue'
	export default {
		components:{
			TypeSize,
			ShowModal,
			bindPhone
		},
		data() {
			return {
				current: 0,
				mode: 'default',
				def: {},
				detail: {},
				tsShow: false,
				bntType: 1,
				isCollectSubject: false,
				subjectId: '',
				isShowModal: false,
				modalTitle: '温馨提示',
				modalContent: '',
				modalCancelText: '取消',
				modalConfirmText: '确定',
				txt: '选择地址',
				addr: '选择地址',
				addrValue: '',
				addrShow: false,
				def: {},
				detialInfo: {},
				form: {
					address: '',
					city: '',
					province: '',
					district: '',
					tele: '',
					zip: '',
					isDefault: 0,
					userName: ''
				},
				addrList: [],
				addrIndex: '',
				params: {
					orderOrigin: 1,
					subjectId: '',
					showId: ''
				}
			};
		},
		onLoad(ops) {
			console.log('ops',ops)
			this.def = ops
			this.bntType = ops.type || 1
			// this.subjectId = ops.id
			this.getInfo()
			this.getQueryGoodsInfoFn()
		},
		methods: {
			changePhone(){
				
			},
			addrs(item){
				this.addrIndex = item.id
				this.params.addrId = item.id
			},
			close(){
				console.log(3)
				this.addrShow = false
				this.$refs.popupAddr.close()
				this.$refs.popupPhone.close()
			},
			call(){
				console.log('call绑定手机回调')
				this.close()
			},
			// 用户地址
			getUserAddrFn(){
				getUserAddr().then((res) => {
					this.addrList = res
				})
			},
			// 添加地址
			save(){
				if(!this.form.userName) {
					uni.showToast({
						title: '请输入姓名',
						icon: 'none'
					})
					return
				}
				if(!this.form.city) {
					uni.showToast({
						title: '请选择地区',
						icon: 'none'
					})
					return
				}
				if(!this.form.address) {
					uni.showToast({
						title: '请输入详细地址',
						icon: 'none'
					})
					return
				}
				if (!(/^1(3|4|5|6|7|8|9)\d{9}$/.test(this.form.tele))) {
					uni.showToast({
						title: '请填写正确手机号码',
						icon: "none"
					});
					return false;
				}
				addUserAddr(this.form).then((res) => {
					this.addrShow = false
					this.getUserAddrFn()
				})
			},
			changeAddr(data) {
				console.log(data.data)
				this.txt = data.data ? data.data.join('-') : ''
				console.log(this.txt)
			},
			addrSave(){
				if(!this.addrIndex) {
					uni.showToast({title: '请选择地址',icon:"none"});
					return false; 
				}
				this.$refs.popupAddr.close()
				this.params.subjectId = this.subjectId
				this.params.showId = this.def.id
				this.$refs.popupSize.close()
				uni.navigateTo({
					url: '/pagesB/pay/goodsOrderPay?info=' + encodeURIComponent(JSON.stringify(this.params))
				})
			},
			goPay(){
				let authData = uni.getStorageSync('userInfo') || {}
				// 是否绑定过手机 authStatus 1 已实名  2 未实名
				// if(authData.authStatus == 2) {
				// 	this.$refs.popupPhone.open('center')
				// 	return
				// }
				
				if(!this.addrIndex){
					this.getUserAddrFn()
					this.$refs.popupAddr.open('bottom')
				}else{
					this.params.subjectId = this.subjectId
					this.params.showId = this.def.id
					this.$refs.popupSize.close()
					uni.navigateTo({
						url: '/pagesB/pay/goodsOrderPay?info=' + encodeURIComponent(JSON.stringify(this.params))
					})
				}
			},
			// 商品信息
			getQueryGoodsInfoFn() {
				getQueryGoodsInfo().then((res) => {
					this.params.id = res.id
				})
			},
			saveValue(t){
				if(t){
					// 记录orderElementPic
					let ids = []
					this.detail.elementsImagesList.forEach((el) => {
						ids.push(el.id)
					})
					console.log('-----ids',ids)
					uni.setStorageSync('orderElementPic',ids)
					// this.$refs.popupSize.close()
					// uni.navigateTo({
					// 	url: '/pagesA/goods/goodsInfoList?orderOrigin=1&showId=' + this.def.id + '&subjectId=' + this.subjectId
					// })
					this.goPay()
				}else{
					this.$refs.popupSize.close()
				}
			},
			change(e) {
				this.current = e.detail.current;
			},
			open() {
				this.$refs.popup.open('bottom')
			},
			close(){
				this.$refs.popup.close()
			},
			addrClose(){
				this.$refs.popupAddr.close()
			},
			getVal(t) {
				if(t==1){
					let info = {
						orderOrigin: 1,
						payType: 11,
						id: this.def.id,
						describ: this.detail.describ,
						unitPrice: this.detail.unitPrice,
						showId: this.def.id,
						subjectId: this.subjectId
					}
					if(this.detail.elementsImagesList && this.detail.elementsImagesList.length >=1) {
						// 去支付
						uni.navigateTo({
							// url: '/pagesB/pay/printOrderPay?orderOrigin=1&payType=11&id='+this.def.id + '&describ=' + this.detail.describ + '&unitPrice=' + this.detail.unitPrice
							url: '/pagesB/pay/printOrderPay?info=' + encodeURIComponent(JSON.stringify(info))
						})
					}else{
						uni.showToast({title: '此商品库存不足无法下单，您换个商品',icon:"none"});
						return false; 
					}
				}
				if(t==2){
					this.$refs.popupSize.open('bottom')
					this.tsShow = true
				}
				this.close()
			},
			getInfo() {
				getQuerySubjectInfo({id:this.def.id}).then((res) => {
					console.log('信息---',res)
					this.detail = res
					this.subjectId = this.detail.id
					this.isCollectSubject = true
					this.detail.elementsImages = res.elementsImages ? res.elementsImages.split(',') : []
					this.detail.renderingImages = res.renderingImages ? res.renderingImages.split(',') : []
				})
			},
			// 下单
			openSet() {
				if(!this.isCollectSubject){
					this.isModalType = 2
					this.isShowModal = true
					// this.modalTitle = '温馨提示'
					this.modalContent = '您好，先收藏后才可下单'
					this.modalCancelText = '取消'
					this.modalConfirmText = '确定'
					return
				}
				this.$refs.popup.open('bottom')
			},
			sc(){
				userCollectSubject({subjectId:this.detail.id,subjectName:this.detail.describ}).then((res) => {
					uni.showToast({title: '收藏成功',icon:""});
					this.isCollectSubject = true
					this.subjectId = res
					this.detail.userIsCollect = 1
					console.log(this.orderElementPic,'000000')
				})
			},
			closeModal(){
				this.isShowModal = false
			},
			bindBtn(type){
				console.log(type,'0')
				if(this.isModalType == 1 && type == "confirm") {
					this.openSet()
				}
			},
			bindTimeChange(e){
				console.log(e.detail)
				this.form.province = e.detail.value[0]
				this.form.city = e.detail.value[1]
				this.form.district = e.detail.value[2]
				this.addrValue = e.detail.code
				this.addr = e.detail.value ? e.detail.value.join('-') : ''
			},
		}
	}
</script>

<style lang="less" scoped>
.detail-box{
	margin: 0 32rpx;
	padding-top: 32rpx;
	padding-bottom: 160rpx;
}
.top-box{
	background: #FFFFFF;
	box-shadow: 0rpx 8rpx 20rpx 0rpx rgba(228,73,91,0.05);
	border-radius: 40rpx;
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	margin-bottom: 48rpx;
	padding-top: 35rpx;
	.item{
		margin: 0 20rpx;
		margin-bottom: 35rpx;
		image{
			width: 90rpx;
			height: 166rpx;
			border-radius: 12rpx;
		}
	}
	.item:nth-child(1),.item:nth-child(6){
		margin-left: 46rpx;
	}
}
.img-info-box{
	image{
		border-radius: 40rpx;
		width: 686rpx;
		height: 686rpx;
	}
	.desc{
		font-size: 32rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #333333;
		margin-top: 60rpx;
	}
}
.swiper-box{
	height: 686rpx;
}
.bnt{
	width: 90%;
	position: fixed;
	left: 50%;
	bottom: 52rpx;
	margin-left: -45%;
	border-radius: 50rpx;
	height: 98rpx;
	line-height: 98rpx;
	background: #E4919D;
	font-size: 36rpx;
	color: #fff;
	text-align: center;
	margin-top: 114rpx;
}

.f-bnt{
	margin: 0 32rpx;
	margin-top: 32rpx;
	position: fixed;
	bottom: 45rpx;
	width: 93%;
	left: 0;
	// background-color: #f3ecef;
	z-index: 9;
	.l,.r{
		width: 44%;
		height: 88rpx;
		border-radius: 44rpx;
		border: 2rpx solid #E4919D;
		font-size: 36rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #E4919D;
		text-align: center;
		line-height: 88rpx;
		display: inline-block;
	}
	.l{
		margin-right: 5%;
		background-color: #f3ecef
	}
	.r{
		background: #E4919D;
		color: #fff;
		margin-left: 5%;
	}
	.cc{
		border-color: #ccc;
		color: #999;
	}
}
.popup-content{
	border-radius: 24rpx;
}
.addr-add-box{
	text-align: center;
	padding: 15rpx;
	font-size: 25rpx;
}
.addr-list{
	padding: 0 20rpx;
	.hed{
		font-size: 30rpx;
		font-weight: bold;
		margin-bottom: 30rpx;
		padding-top: 15rpx;
		position: relative;
		.close{
			float: right;
		}
		.xw{
			width: 28rpx;
			height: 28rpx;
		}
	}
	.title{
		font-size: 28rpx;
		color: #333;
	}
	.desc{
		margin-top: 6rpx;
		color: #999;
		font-size: 24rpx;
	}
	padding-top: 20rpx;
	.item{
		margin-bottom: 18rpx;
		border-bottom: 1rpx solid #ccc;
		padding-bottom: 20rpx;
		position: relative;
	}
	.check{
		position: absolute;
		top: 20rpx;
		right: 0;
		width: 35rpx;
		height: 35rpx;
	}
}
.addr-model{
	width: 640rpx;
	min-height: 784rpx;
	border-radius: 24rpx;
	background: #F3ECEF;
	box-shadow: 0px 8rpx 20rpx 0px rgba(235, 141, 167, 0.35);
	// position: absolute;
	// left: 50%;
	// top: 15%;
	// margin-left: -320rpx;
	margin: 0 auto;
	margin-bottom: 50rpx;
	padding: 15rpx;
	.hed{
		font-size: 28rpx;
		color: #AAAAAA;
		margin: 32rpx;
		margin-bottom: 50rpx;
	}
	.rad{
		width: 29rpx;
		height: 29rpx;
		border: 1rpx solid #AAAAAA;
		display: inline-block;
		border-radius: 50%;
		margin-right: 12rpx;
		position: relative;
		top: 7rpx;
	}
	.v-list{
		margin: 32rpx;
		.item{
			display: flex;
			align-items: center;
			margin-bottom: 30rpx;
			border-bottom: rgba(170, 170, 170, 0.2) 1rpx solid;
			padding-bottom: 30rpx;
			font-size: 24rpx;
		}
		.left-name{
			width: 180rpx;
		}
		.rcont{
			flex: 1;
			text-align: right;
			input,textarea{
				font-size: 25rpx
			}
		}
		.fcode{
			display: flex;
			align-items: center;
		}
		.finput{
			flex: 1;
			margin-right: 50rpx;
		}
		.get-code{
			background-color: #666;
			border-radius: 25rpx;
			color: #fff;
			width: 170rpx;
			text-align: center;
			padding: 12rpx 0;
		}
	}
	.bntx{
		.c,.s{
			display: inline-block;
			width: 50%;
			font-size: 34rpx;
			color: #AAAAAA;
			text-align: center;
			padding: 15rpx 0;
		}
		.s{
			color: #E4919D;
		}
	}
}
.t-bnt{
	width: 320rpx;
	height: 80rpx;
	line-height: 80rpx;
	border-radius: 40rpx;
	background: #E4919D;
	font-size: 28rpx;
	color: #fff;
	text-align: center;
	margin: 45rpx auto;
}
</style>
